<template>
  <div class="box">
    儿子的文具： {{ toy }}
    <br>
    <p>{{ modelValue.name }} {{ modelValue.color }} {{ modelValue.year }} {{ modelValue.price }}</p>
    <button class="btn" @click="handlePrice">修改父亲的汽车</button>
  </div>

</template>

<script lang='ts' setup>
import { ref } from 'vue';

const toy = ref("奥特曼")
/**
 * name: { type: String, default: "奔驰", required: true },
  color: { type: String, default: "红色", required: true },
  year: { type: Number, default: 2022, required: true },
  price: { type: Number, default: 10000, required: true },
  handlePrice: { type: Function, default: () => { } }
*/
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      name: "奔驰",
      color: "红色",
      year: 2022,
      price: 10000,
      handlePrice: () => { }
    })
  }
})

const emit = defineEmits(['update:modelValue'])

//返回值的时候，直接覆盖会导致失去响应式，所以需要使用Object.assign
const handlePrice = () => {
  emit('update:modelValue', Object.assign(props.modelValue, {
    name: "奔驰",
    color: "红色",
    year: 2022,
    price: 105260
  }))
}

</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
}
</style>
